<template>
	<div>
		<smpPanel title="连通性测试">
			<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form" :rules="rules">
				<el-row>
					<el-col :span="8">
						<el-form-item label="ESB环境:" prop="esbAddr">
							<!-- <el-select v-model="form.esbAddr" style="width: 100%" placeholder="环境类型" disabled>
									<el-option v-for="item in dict('SMP0016')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select> -->
							<!-- <el-input v-model="form.esbAddr"></el-input> -->
							<el-select v-model="form.esbAddr" style="width: 100%" placeholder="ESB环境">
								<el-option v-for="item in esbEnvironmentList" :key="item.ip"
									:label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="目标系统环境:" label-width="200px" prop="systemCurrentAddr">
							<el-input v-model="form.systemCurrentAddr"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="命令:" prop="command">
							<el-select v-model="form.command" style="width: 100%" placeholder="命令">
								<el-option v-for="item in dict('SMP0029')" :key="item.itemCode" :label="item.itemName"
									:value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8" v-if="form.command == '02'">
						<el-form-item label="目标端口:" prop="port">
							<el-input v-model="form.port" placeholder="请输入目标端口"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="form.command == '02'?'16':'24'">
						<el-form-item size="mini" style="text-align: right;">
							<el-button type="primary" plain @click="execute">发&nbsp;&nbsp;&nbsp;送</el-button>
							<el-button @click="reset">重&nbsp;&nbsp;&nbsp;置</el-button>
							<!-- <el-button size="mini" type="primary" plain @click="execute">测试</el-button> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</smpPanel>
		<smpPanel title="测试结果">
			<div class="article">
				<!-- vue展示markdown内容,v-highlight自定义指令 -->
				<div v-highlight v-html="result" class="markdown-body" id="content"></div>
			</div </div>
		</smpPanel>
	</div>
</template>

<script>
	"use strict";
	import {
		executeCommand,
		getEsbEnvironmentByEsbFlg
	} from '@/api/environment.js';

	export default {
		data() {
			return {
				esbEnvironmentList: [],
				dialogVisible: false,
				result: this.$marked('```shell\n \n \n \n```'),
				rules: {
					esbAddr: [{
						required: true,
						message: "ESB环境不能为空",
						trigger: ['blur', 'change']
					}],
					systemCurrentAddr: [{
						required: true,
						message: "目标系统环境不能为空",
						trigger: ['blur', 'change']
					}],
					command: [{
						required: true,
						message: "命令不能为空",
						trigger: ['blur', 'change']
					}],
					port: [{
						required: true,
						message: "端口不能为空",
						trigger: ['blur', 'change']
					}]
				},
				form: {
					systemCurrentAddr: '',
					esbAddr: '',
					port: '',
					command: ''
				},
			};
		},

		created() {
			this.getEsbEnvironmentList();
		},

		methods: {
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},

			execute() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '网络测试中，请稍后',
							spinner: 'el-icon-loading'
						});
						executeCommand(this.form).then(response => {
							if (response.data.code == '0000') {
								//this.result = response.data.message;

								let content = '``` shell\n' + response.data.message + '\n```';

								// 调用marked()方法，将markdown转换成html
								this.result = this.$marked(content);

								loading.close();
								this.initflg = true;
							} else {
								this.$message({
									duration: 5000,
									type: 'error',
									message: response.data.message
								});
								loading.close();
								this.initflg = true;
							}
						}).catch(error => {
							loading.close();
							this.$message({
								duration: 5000,
								type: 'error',
								message: '联通性测试失败！'
							});
							this.form = {};
							this.$refs["form"].resetFields();
							this.dialogVisible = false;
						});
					}
				})
			},

		},
	}
</script>
<style scoped>
	.article {
		margin-top: -11px;
		margin-left: 0px;
		padding-left: 0px;
	}
</style>
